<template>
  <div class="login-content">
        <van-nav-bar title="消息中心"
            left-text="返回"
            left-arrow
            @click-left="backEvt"/>
    </div>
    <van-tabs v-model:active="active" @click-tab="onClickTab" swipeable animated type="card" title-active-color="hotpink">
          <van-tab title="消息"><img :src="messages.image" alt=""></van-tab>
          <van-tab title="评论"><img :src="messages.image" alt=""></van-tab>
          <van-tab title="私信"><img :src="messages.image" alt=""></van-tab>
    </van-tabs>
  
</template>

<script setup lang="ts">
import { ref,onMounted, reactive } from 'vue';
import { showToast } from 'vant';
import { useRouter } from 'vue-router';

let messages = reactive({})
const router = useRouter()
const active = ref(0);
const onClickTab = ({ title }) => showToast(title);


/* 返回按钮事件 */
function backEvt() {
    router.push('/mine')
}

onMounted(() => {
  messages={
    image:'src/images/1.png'
  }
})
</script>

<style lang="less" scoped>
.van-swipe__track div{
  width: 400px;
  // height: 400px;
}
.van-swipe__track img{
  width: 100%;
  height: 100%;
}
</style>